import React, { useState, useEffect, Fragment } from 'react';
import { Card, Form, Divider, Spin, Descriptions, message, Icon, Modal } from 'antd';
import { connect } from 'dva';
import { useAntdTable, useBoolean } from '@umijs/hooks';
import ViewPlanRule from './ViewPlanRule';
import Flow2 from '@/pages/FormDesigner/templates/Flow2.js';
import ScrollBar from '@/components/ScrollBar';
import request from '@/utils/request';
import styles from '../index.less';

import SlickTable from '@/components/SlickTable';

function AddStatusFlow({ size: { height }, goToStep, obj }) {
  const [loading, setLoading] = useState(false);
  const [detail, setDetail] = useState({});
  const { state, setTrue, setFalse } = useBoolean(false);
  const [passId, setPassId] = useState('');

  const { state: flowState, setTrue: setFlowTrue, setFalse: setFlowFalse } = useBoolean(false);
  const [formId, setFormId] = useState('');

  useEffect(() => {
    setLoading(true);
    request('pmc/pms/PmOrderFlowDefController/get', {
      data: {
        flowId: obj.flowId,
      },
      method: 'GET',
    })
      .then(res => {
        if (res.success) {
          setDetail(res.data);
        } else {
          message.error(res.errMessage);
        }
      })
      .always(() => {
        setLoading(false);
      });
  }, []);

  const getTableData = ({ current, pageSize }) => {
    return request('pmc/pms/PmOrderFlowNodeController/queryPage', {
      data: {
        flowId: obj.flowId,
        pageNum: current,
        pageSize,
      },
    }).then(res => {
      if (Array.isArray(res.data.records)) {
        return {
          total: res.data.total,
          data: res.data.records,
        };
      }
      return {
        total: 0,
        data: [],
      };
    });
  };

  const { tableProps } = useAntdTable(
    params => {
      return getTableData({ ...params, pageSize: 5 });
    },
    [],
    {
      defaultPageSize: 5,
    }
  );

  const { pagination, ...restTableProps } = tableProps;

  const columns = [
    {
      title: '环节名称',
      dataIndex: 'flowNodeName',
      ellipsis: true,
    },
    /* eslint-disable */
    {
      title: '环节编码',
      dataIndex: 'flowNodeCode',
      ellipsis: true,
      // render: (text, record) => {
      //   return record.childrenType === 'plan' ? (
      //     <a
      //       onClick={() => {
      //         setTrue();
      //         setPassId(record.flowNodeId);
      //         setStatus('plan');
      //       }}
      //     >
      //       {text}
      //     </a>
      //   ) : record.childrenType === 'rule' ? (
      //     <a
      //       onClick={() => {
      //         setTrue();
      //         setPassId(record.flowNodeId);
      //         setStatus('rule');
      //       }}
      //     >
      //       {text}
      //     </a>
      //   ) : (
      //     <span>{text}</span>
      //   );
      // },
    },
    /* eslint-enable */
    {
      title: '是否自动环节',
      dataIndex: 'isAutoName',
      ellipsis: true,
    },
    {
      title: '关联事件',
      dataIndex: 'hasPlan',
      ellipsis: true,
      render: (text, record) => {
        return text === 'Y' ? (
          <a
            onClick={() => {
              setTrue();
              setPassId(record.flowNodeId);
            }}
          >
            详情
          </a>
        ) : null;
      },
    },

    {
      title: '关联表单',
      dataIndex: 'formName',
      ellipsis: true,
      render: (text, record) => {
        return (
          <a
            onClick={() => {
              setFlowTrue();
              setFormId(record.formId);
            }}
          >
            {text}
          </a>
        );
      },
    },
  ];

  return (
    <div>
      <Card
        title="流程预览"
        style={{ minHeight: height }}
        extra={
          <Fragment>
            <a
              onClick={() => {
                goToStep(5, {
                  obj: { ...obj, operType: 'view' },
                });
              }}
            >
              图文模式
            </a>
            <Divider type="vertical" />
            <a
              type="primary"
              onClick={() => {
                goToStep(1);
              }}
            >
              <Icon type="rollback" />
              返回
            </a>
          </Fragment>
        }
      >
        <Spin spinning={loading}>
          <div className="ant-detail-title">流程信息</div>
          <Descriptions column={4}>
            <Descriptions.Item label="流程名称">{detail.flowName}</Descriptions.Item>
            <Descriptions.Item label="流程编码">{detail.flowCode}</Descriptions.Item>
            <Descriptions.Item label="流程版本">{detail.version}</Descriptions.Item>
          </Descriptions>
          <Divider className="small" />
          <div className="ant-detail-title">流程时限设置</div>
          <Descriptions column={4}>
            <Descriptions.Item label="完成时限">{detail.limitValue}</Descriptions.Item>
            <Descriptions.Item label="告警时限">{detail.alertValue}</Descriptions.Item>
            <Descriptions.Item label="时间单位">{detail.timeUnitName}</Descriptions.Item>
          </Descriptions>
        </Spin>
        <Divider className="small" />
        <div className="ant-detail-title">
          <span>环节信息</span>
        </div>
        <SlickTable
          style={{ marginTop: 8 }}
          rowKey={record => `${record.flowNodeId}${Math.random().toString(36)}`}
          columns={columns}
          {...restTableProps}
          data={{
            pagination: {
              ...pagination,
              pageSize: 5,
            },
          }}
        />
      </Card>
      {state ? <ViewPlanRule passId={passId} visiable={state} close={setFalse} /> : null}
      {flowState ? (
        <Modal
          className={styles.modal}
          title="表单预览"
          visible={flowState}
          onCancel={() => {
            setFlowFalse();
          }}
          footer={null}
          width="60%"
          destroyOnClose
        >
          <ScrollBar autoHide autoHeight autoHeightMax={height * 0.7}>
            <div style={{ height: height * 0.7 }} className={styles.set_conditionright}>
              <Flow2 formId={formId} mode="readOnly" />
            </div>
          </ScrollBar>
        </Modal>
      ) : null}
    </div>
  );
}

export default connect(({ setting }) => ({
  size: setting.size,
}))(Form.create()(AddStatusFlow));
